<!-- 其他组件 -->
<template>
  <div class="home-cate" v-infinite-scroll="loadMore" infinite-scroll-distance="10">
    <div style="height: 8.8rem; width: 100%; background: red"></div>
    <div class="container-wrap">
      <HomeCateList :cateLists="getHomeCateListDatas"/>
    </div>
    <div class="container-wrap">
      <HomeBrandList :brandLists="getHomeCateListDatas"/>
    </div>
    <div class="container-wrap" style="background:none;margin-top:1rem">
      <div class="goods-list">
        <HomeList :lists="homeCoodsListDatas"/>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeCateList from "../components/HomeCateList";
import HomeBrandList from "../components/HomeBrandList";
import HomeList from "../components/HomeList";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeCateList,
    HomeBrandList,
    HomeList
  },
  data() {
    //这里存放数据
    return {
      page: 0
    };
  },
  //监听属性 类似于data概念
  computed: {
    getHomeCateListDatas() {
      return this.$store.state.homeCateListDatas;
    },
    homeCoodsListDatas() {
      let newLists = this.$store.state.homeCoodsListDatas.map(item => {
        return {
          goods_thumb: item.goods_thumb,
          title: item.goods_name,
          goods_id: item.goods_id,
          shop_price: item.shop_price
        };
      });
      return newLists;
    },
    getCatId() {
      return this.$store.state.catId;
    }
  },
  methods: {
    loadMore() {
      console.log("loadMore");
      this.page++;
      this.$store.dispatch("actChangeHomeCoodsListDatas", {
        cat_id: this.getCatId,
        page: this.page
      });
    }
  },
  watch: {
    getCatId() {
      console.log("变化了");
      this.$store.state.homeCoodsListDatas = [];
      this.page = 1;
      this.$store.dispatch("actChangeHomeCoodsListDatas", {
        cat_id: this.getCatId,
        page: this.page
      });
    }
  },
  mounted() {
    console.log(this.$store.state.catId);
  }
};
</script>
<style lang="less">
.home-cate {
  margin-bottom: 5rem;
}
</style>